.root {
    @apply bg-accent-1 relative box-border inline-block max-h-full
  w-full cursor-pointer overflow-hidden bg-cover
  bg-center bg-no-repeat transition-transform ease-linear;
    height: 100% !important;
}

.root:hover {
    & .productImage {
        transform: scale(1.2625);
    }

    & .header .name span,
    & .header .price,
    & .wishlistButton {
        @apply bg-product-gray text-primary;
    }

    &:nth-child(6n + 1) .header .name span,
    &:nth-child(6n + 1) .header .price,
    &:nth-child(6n + 1) .wishlistButton {
        @apply bg-product-blue text-primary;
    }

    &:nth-child(6n + 5) .header .name span,
    &:nth-child(6n + 5) .header .price,
    &:nth-child(6n + 5) .wishlistButton {
        @apply bg-product-green text-primary;
    }

    &:nth-child(6n + 3) .header .name span,
    &:nth-child(6n + 3) .header .price,
    &:nth-child(6n + 3) .wishlistButton {
        @apply bg-product-pink text-primary;
    }

    &:nth-child(6n + 6) .header .name span,
    &:nth-child(6n + 6) .header .price,
    &:nth-child(6n + 6) .wishlistButton {
        @apply bg-product-gray text-primary;
    }
}

.header {
    @apply absolute top-0 left-0
  z-20 pr-16 transition-colors duration-500 ease-in-out;
}

.header .name {
    @apply leading-extra-loose w-full max-w-full pt-0
  transition-colors duration-500 ease-in-out;
    font-size: 2rem;
    letter-spacing: 0.4px;
}

.header .name span {
    @apply bg-primary text-primary py-4 px-6 font-bold
  transition-colors duration-500 ease-in-out;
    font-size: inherit;
    letter-spacing: inherit;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.header .price {
    @apply bg-primary text-accent-9 inline-block px-6 pt-2 pb-4
  text-sm font-semibold tracking-wide
  transition-colors duration-500 ease-in-out;
}

.imageContainer {
    @apply flex items-center justify-center overflow-hidden;
}

.imageContainer > div {
    min-width: 100%;
}

.imageContainer .productImage {
    @apply scale-120 transform object-cover
  transition-transform duration-500;
}

.root .wishlistButton {
    @apply absolute top-0 right-0 z-30;
}

/* Variant Simple */
.simple .header .name {
    @apply -mt-1 pt-2 text-lg leading-10;
}

.simple .header .price {
    @apply text-sm;
}

/* Variant Slim */
.slim {
    @apply relative box-border overflow-hidden
  bg-transparent;
}

.slim .header {
    @apply absolute inset-0 z-20 mr-8 flex items-center justify-end;
}

.slim span {
    @apply bg-accent-9 text-accent-0 inline-block break-words
  p-3 text-xl font-bold;
}

.root:global(.secondary) .header span {
    @apply bg-accent-0 text-accent-9;
}
